<template>
  <view>
    <view class="address-text" @click="chooseAddress()">
      <view v-if="Object.keys(address).length===0" style="position: absolute;left: 30%;top: 40%;">
        <button type="primary" size="mini" @click="chooseAddress()">请选择收获地址+</button>
      </view>
      <view class="address-box" v-else>
        <view class="people">
          <view>收货人：{{address.userName}}</view>
          <view>
            电话：{{address.telNumber}}
            <uni-icons type="forward" size="18"></uni-icons>
          </view>
        </view>
        <view class="address">
          <view style="flex: 1;white-space:nowrap;">收货地址：</view>
          <p style="flex: 4;width: 280rpx;overflow-wrap: break-word;">
            {{address.provinceName}}{{address.cityName}}{{address.countyName}}{{address.detailInfo}}
          </p>
        </view>
      </view>
    </view>
    <image src="../../static/cart_border@2x.png" style="display: block;width: 100%; height: 10rpx;"></image>
  </view>
</template>

<script>
  export default {
    name: "my-address",
    data() {
      return {
        address: uni.getStorageSync("address") ? JSON.parse(uni.getStorageSync("address")) : this.$store.state.address
      };
    },
    methods: {
      async chooseAddress() {
        const [err, succ] = await uni.chooseAddress().catch(err => err)
        if (err === null && succ.errMsg === "chooseAddress:ok") {
          this.address = succ
          uni.setStorageSync("address", JSON.stringify(succ))
          this.$store.commit('setAddress', succ)
        }
      }
    }
  }
</script>

<style lang="scss">
  .address-text {
    height: 200rpx;
    background-color: white;
    position: relative;

    .address-box {
      padding: 20rpx;

      .people {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        margin-bottom: 30rpx;
        font-size: 12px;
      }

      .address {
        font-size: 12px;
        display: flex;
      }
    }

  }
</style>